<template>
	
	<view class="wmpopup" @touchmove.stop.prevent="">
		
		
		<view class="wmpopup-box">
			
			<scroll-view scroll-y="true" style="height: 1000rpx;">
				<view class="">
					
					<view class="xflex-x-between">
						<view class="wmpopup-title">
							更多条件筛选
						</view>
						<image @click="close()" class="wmpopup-gb" src="/static/image/index/popup-gb.png" mode=""></image>
					</view>
					
					<view class="xmt32 xbb8D xpb32">
						<view class="xfz32 xmt12 xc1">
							宾客评分
						</view>
						
						<view class="wmpopup-leve xmt32">
							<view class="wmpopup-leve-item  xflex-x-center" @click="counter.enterInfo.score_id = item.id" :class="counter.enterInfo.score_id == item.id?'active':''" v-for="(item,index) in data.score" :key="index">
								{{item.name}}
							</view>
						</view>
					</view>
					
					<view class="xmt32 xbb8D xpb32">
						<view class="xfz32 xmt12 xc1">
							免费服务
						</view>
						
						<view class="wmpopup-leve xmt32">
							<view class="wmpopup-leve-item xflex-x-center" @click="mianfei(item.id)" :class="counter.enterInfo.free_id.includes(item.id)?'active':''" v-for="(item,index) in data.service" :key="index">
								{{item.name}}
							</view>
						</view>
					</view>
					
					<view class="xmt32 xbb8D xpb32">
						<view class="xfz32 xmt12 xc1">
							配套设施及周边
						</view>
						
						<view class="wmpopup-leve xmt32">
							<view class="wmpopup-leve-item xflex-x-center" @click="fuwu(item.id)" :class="counter.enterInfo.support_id.includes(item.id)?'active':''" v-for="(item,index) in data.facility" :key="index">
								{{item.name}}
							</view>
						</view>
					</view>
					
					<view class="xmt32 xbb8D xpb32">
						<view class="xfz32 xmt12 xc1">
							收费服务
						</view>
						
						<view class="wmpopup-leve xmt32">
							<view class="wmpopup-leve-item xflex-x-center" @click="shoufei(item.id)" :class="counter.enterInfo.charge_id.includes(item.id)?'active':''" v-for="(item,index) in data.charge" :key="index">
								{{item.name}}
							</view>
						</view>
					</view>
					
					
					<view class="xmt32 xbb8D xpb32">
						<view class="xfz32 xmt12 xc1">
							可接受范围(公里)
						</view>
						
						<div style="padding:20rpx; margin:20rpx; margin-top: 50rpx;">
							<yi-chan-movable-area @change="change" :defaultValue="counter.enterInfo.distance" min='0' max='20'></yi-chan-movable-area>
						</div>
					</view>
					
					
					
				</view>
				
			</scroll-view>
			<view class="btn" @click="close()">
				确定
			</view>
		</view>
		
		
		
	</view>
	
</template>

<script setup>
	import YiChanMovableArea from '../../components/yichan-movable-area/yichan-movable-area.vue';
	import {reactive, ref,defineEmits} from "vue"
	import {
		useCounterStore
	} from '@/Store/index'
	const counter = useCounterStore()
	import {hotelscore,hotelfree,hotelsupport,hotelcharge} from "../../network/home.js"
	let star = ['任何',"1星/经济型",'2星/舒适型','3星/中档型',"4星/高档型",'5星/豪华型','奢华型']
	const emit= defineEmits(['close'])
	
	// 关闭弹窗
	const close = () =>{
		emit('close')
	}
	// 评分
	hotelscore().then(res=>{
		data.score = [{id:0,name:'任何'},...res.data]
	})
	hotelfree().then(res=>{
		data.service = res.data
	})
	hotelsupport().then(res=>{
		data.facility = res.data
	})
	hotelcharge().then(res=>{
		data.charge = res.data
	})
	let data = reactive({
		score:[],//评分
		service:[],//服务\
		facility:[],//配套
		charge:[],//收费
	})
	
	const fuwu = (id) =>{
		if(counter.enterInfo.support_id.includes(id)){
			counter.enterInfo.support_id.splice(counter.enterInfo.support_id.indexOf(id),1)
		}else{
			counter.enterInfo.support_id.push(id)
		}
		
	}
	
	const change = (e) =>{
		console.log(e);
		counter.enterInfo.distance = e
	}
	
	const shoufei = (id) =>{
		
		if(counter.enterInfo.charge_id.includes(id)){
			counter.enterInfo.charge_id.splice(counter.enterInfo.charge_id.indexOf(id),1)
		}else{
			counter.enterInfo.charge_id.push(id)
		}
		
		
	}
	
	const mianfei = (id) =>{
		
		if(counter.enterInfo.free_id.includes(id)){
			counter.enterInfo.free_id.splice(counter.enterInfo.free_id.indexOf(id),1)
		}else{
			counter.enterInfo.free_id.push(id)
		}
		
	}
	
	
	
	
</script>

<style lang="scss">
	.wmpopup {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100vh;
		z-index: 3;
		background-color: #00000070;
		overflow: hidden;
	
		&-box {
			position: absolute;
			padding: 30rpx 31rpx;
			box-sizing: border-box;
			width: 750rpx;
			// height: 85%;
			bottom: 0;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
		}
	
		&-gb {
			width: 40rpx;
			height: 40rpx;
		}
	
		&-title {
			font-weight: bold;
			font-size: 40rpx;
			color: #222222;
		}
		
		&-leve {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 18rpx;
			
			&-item {
				min-width: 162rpx;
				height: 50rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
			}
		}
		
		.active {
			background: #0EBBFB;
			color: #FFFFFF;
		}
		
		&-people {
			&-icon {
				width: 50rpx;
				height: 50rpx;
			}
			
			&-num {
				width: 94rpx;
				height: 50rpx;
				background: #F2F2F2;
			}
		}
		.add {
			font-weight: 500;
			font-size: 28rpx;
			color: #0EBBFB;
		}
		
		.btn {
			width: 630rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			border-radius: 44rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			margin: auto;
			text-align: center;
			line-height: 88rpx;
			margin-top: 60rpx;
		}
	}
	
	

	
	
</style>index